<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style>
        /* 定义进入点 离去点的样式 */
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(200px);
        }

        /* 定义动画活动区间的样式 */
        .v-enter-active,
        .v-leave-active {
            transition: all 1.2s ease;
        }

        /* 自定义动画前缀，对指定的transition名称为f2的起效 */
        .f2-enter,
        .f2-leave-to {
            opacity: 0;
            transform: translateY(200px);
        }

        /* 定义动画活动区间的样式 */
        .f2-enter-active,
        .f2-leave-active {
            transition: all 1.2s ease;
        }

        #app {
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!--vue 动画标签，实现基本的动画-->
    <transition>
        <!-- v-show 显示 -->
        <h2 v-show="flag">hello world</h2>
    </transition>

    <hr>
    <input type="button" value="toggle" @click="flag2=!flag2">
    <!--vue 动画标签，name自定义动画前缀，样式前缀由 v- 改为 f2- -->
    <transition name="f2">
        <h2 v-show="flag2">hello world</h2>
    </transition>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script>

    var vm = new Vue({
        el: '#app',
        data: {
            flag: true,
            flag2: true
        },
        methods: {
        },
    });
</script>
</body>
</html>
